// import React, { Component, useEffect, useState } from 'react'
//  推荐将 BrowserRouter 重命名为 Router
// import { Router, Route, Switch } from 'react-router-dom'

// import Login from './pages/Login'/
// import Layout from './pages/Layout'
// import AuthRouter from './Components/AuthRouter'
// import history from './utils/history'
// export default class App extends Component {
//   render() {
//     return <Router history = {history}>
//       {/* React 路由中，默认是不会匹配到第一个就停止匹配 */}
//       {/* Switch负责匹配到第一个组件后，就不再向后匹配 */}
//       <Switch>
//         <Route path="/login" component={Login}></Route>
//         <AuthRouter path="/" component={Layout}></AuthRouter>
//       </Switch>
//     </Router>
    
//   }
// }

// import React, { useEffect, useState } from 'react'
// import request from "./utils/request"
// export default function App() {

//   const [list, setList] = useState([])
//   async function loadList() {
//     const res = await request({ url: '/v1_0/channels' })
//     console.log('res  ----->  ', res.data.channels);
//     setList(res.data.channels)
//   }

//   useEffect(() => {
//     loadList()
//   }, [])

//   return (
//     <div>
      
//     </div>
//   )
// }


import React, { useEffect, useState,useRef }  from 'react'
export default function App() {
  const [isshow, setIsshow] = useState(true)
  return (
    <div>
      {isshow && <Child></Child>}
      <button onClick={() => setIsshow(!isshow)}>点击卸载子组件</button>
    </div>
  )
}

function Child() {
  // 创建ref
  const ref = useRef()
  // 挂载开启定时器
  useEffect(() => {
    // 使用ref保存数据
    ref.current = setInterval(() => {
      console.log('打印  ----->  ', 123);
    }, 100);
  }, [])

  useEffect(() => {
    return () =>{
      // 卸载定时器
      clearInterval(ref.current)
    }
  })
  return <div>我是子组件</div>
}





